﻿<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Gantt chart demo</title>
	<style type="text/css">
		body{
			font-family: Verdana, Arial, Sans-serif;
			font-size:14px;
		}
		#gantt{
			width:1200px;
			height:550px;
			padding:1px;
		}
	</style>
	<!--link rel="stylesheet" type="text/css" href="gantt.css"/-->
	<script type="text/javascript" src="lib/html.js"></script>
	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="gantt.js"></script>
	<script type="text/javascript">
		var ganttData = {type:"MSProjectXML",

			"tasks":[
				{"id":"1", "name":"SOFTWARE SELECTION", "outlineNumber":"0", "start":"2008-01-07T08:00:00", "finish":"2008-04-15T17:00:00"},
				{"id":"2", "name":"RFP", "outlineNumber":"1", "start":"2008-01-07T08:00:00", "finish":"2008-02-19T17:00:00"},
				{"id":"3", "name":"REQUIREMENTS", "outlineNumber":"1.1", "start":"2008-01-07T08:00:00", "finish":"2008-01-29T17:00:00"},
				{"id":"4", "name":"Develop Technical Requirements", "outlineNumber":"1.1.1", "start":"2008-01-07T08:00:00", "finish":"2008-01-08T17:00:00", "progress":0},
				{"id":"5", "name":"Develop Functional Requirements", "outlineNumber":"1.1.2", "start":"2008-01-09T08:00:00", "finish":"2008-01-29T17:00:00", "progress":0, "predecessor":"4"},
				{"id":"6", "name":"MARKET RESEARCH", "outlineNumber":"1.2", "start":"2008-01-09T08:00:00", "finish":"2008-02-19T17:00:00"},
				{"id":"7", "name":"Analyze Market", "outlineNumber":"1.2.1", "start":"2008-01-09T08:00:00", "finish":"2008-01-29T17:00:00", "progress":0},
				{"id":"8", "name":"Negotiate with Vendors", "outlineNumber":"1.2.2", "start":"2008-01-30T08:00:00", "finish":"2008-02-19T17:00:00", "progress":0, "predecessor":"7"},
				{"id":"9", "name":"Obtain Proposals", "outlineNumber":"1.2.3", "start":"2008-02-19T17:00:00", "finish":"2008-02-19T17:00:00", "progress":0, "predecessor":"5"},
				{"id":"10", "name":"SELECTION", "outlineNumber":"2", "start":"2008-02-20T08:00:00", "finish":"2008-04-15T17:00:00"},
				{"id":"11", "name":"PROPOSAL ANALYSIS", "outlineNumber":"2.1", "start":"2008-02-20T08:00:00", "finish":"2008-04-01T17:00:00"},
				{"id":"12", "name":"Analyze Demo Versions", "outlineNumber":"2.1.1", "start":"2008-02-20T08:00:00", "finish":"2008-03-18T17:00:00", "progress":0, "predecessor":"9"},
				{"id":"13", "name":"Analyze Specifications Analysis", "outlineNumber":"2.1.2", "start":"2008-03-19T08:00:00", "finish":"2008-04-01T17:00:00", "progress":0, "predecessor":"9"},
				{"id":"14", "name":"INFORMATION CHECK UP", "outlineNumber":"2.2", "start":"2008-03-19T08:00:00", "finish":"2008-04-15T17:00:00"},
				{"id":"15", "name":"Check References", "outlineNumber":"2.2.1", "start":"2008-03-19T08:00:00", "finish":"2008-04-15T17:00:00", "progress":0, "predecessor":"12"},
				{"id":"16", "name":"Check Support", "outlineNumber":"2.2.2", "start":"2008-04-02T08:00:00", "finish":"2008-04-15T17:00:00", "progress":0, "predecessor":"13"},
				{"id":"17", "name":"Selection", "outlineNumber":"2.2.3", "start":"2008-04-15T17:00:00", "finish":"2008-04-15T17:00:00", "progress":0, "predecessor":"15"}
			]

 		};
		
		$(function(){
			$("#gantt").gantt({
				//width:1300
				grid:{draw:true}
			}, ganttData);
		});
	</script>
</head>
<body>
	<h1>Gantt chart demo</h1>
	<p><a href="anyGantt.png">Design</a></p>
	<div id="gantt"></div>
	<p>Next paragraph sample.</p>
</body>
</html>